<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body,
    #myCanvas {
        width: 100%;
        background-color: #000;
    }

    #myCanvas {
        position: fixed;
        top: 0;
        left: 0;
    }

    .box {
        height: 15000px;
        position: relative;
    }

    ul {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }

    li {
        position: absolute;
        list-style: none;
        width: 400px;
        height: 300px;
        transition: all 0.35s;
    }

    li:nth-child(1) {
        left: -400px;
        top: 100px;
        background-color: #fff;
    }

    li:nth-child(2) {
        right: -400px;
        top: 0px;
        background-color: rgb(143, 49, 49);
    }

    li:nth-child(3) {
        right: -400px;
        top: 400px;
        background-color: rgb(33, 23, 121);
    }

    li:nth-child(4) {
        left: -400px;
        top: 500px;
        background-color: rgb(79, 199, 115);
    }

    li:nth-child(5) {
        left: 50%;
        bottom: -300px;
        background-color: #fff;
    }

    li:nth-child(1).active {
        left: 0;
        top: 100px;
    }

    li:nth-child(2).active {
        right: 0;
        top: 0px;
    }

    li:nth-child(3).active {
        right: 0;
        top: 400px;
    }

    li:nth-child(4).active {
        left: 0;
        top: 500px;
    }

    li:nth-child(5).active {
        left: 50%;
        bottom: 0;
    }

    @media screen and (max-width:800px) {
        li {
        width: 10rem;
        height: 10rem;
    }
    }
</style>

<body>
    <div class="box">
        <canvas id="myCanvas"></canvas>
        <ul class="ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
<script src="./index.js"></script>
<script>

</script>

</html>